<template>
  <fieldset>
    <legend>二级联动</legend>
    省:
    <!-- <h1>{{ sel1 }}</h1> -->
    <select v-model="sel1" @change="provienceChange(sel1)">
      <option v-for="item in provience" :key="item.id" :value="item.id">
        {{ item.name }}
      </option>
    </select>
    市:
    <select v-model="sel2">
      <option v-for="item in citys" :key="item.id" :value="item.id">
        {{ item.name }}
      </option>
    </select>
  </fieldset>
</template>
<script>
import * as api from "@/api/select";
export default {
  data() {
    return {
      //省的数据
      provience: [],
      //市的数据
      citys: [],
      //选中的省的id
      sel1: 1,
      //选中市的id
      sel2: "",
    };
  },
  mounted() {
    api.fetchData().then((res) => {
      console.log(res);
      //获取了所有的数据
      this.provience = res;
      //获取默认第一条的id
      let pid = res[0].id;
      this.provienceChange(pid);
    });
  },
  methods: {
    provienceChange(pid) {
      //选择的省变化的时候,获取选择的省对应的id,发起请求,请求市的数据
      console.log(pid);
      api.fetchCity(pid).then((res) => {
        console.log(res);
        this.citys = res;
        //默认选中
        if (res.length > 0) {
          this.sel2 = res[0].id;
        }
      });
    },
  },
};
</script>
<style scoped>
select {
  width: 100px;
}
</style>